<!--
 * @Author: liaoyu1992 1519778181@qq.com
 * @Date: 2022-11-04 23:18:12
 * @LastEditors: liaoyu1992 1519778181@qq.com
 * @LastEditTime: 2022-11-11 22:01:46
 * @FilePath: \kgantt\core\components\other\Arrow.vue
 * @Description: 
-->
<template>
  <g class="kgantt-arrow">
    <path strokeWidth="1.5" :d="path" fill="none" />
    <polygon :points="trianglePoints" />
  </g>
</template>
<script lang="ts" setup>
import { BarTask } from "../../types/barTask";
import { onMounted, PropType, ref, watch } from "vue";
const props = defineProps({
  taskFrom: {
    type: Object as PropType<BarTask>,
    default: {},
  },
  taskTo: {
    type: Object as PropType<BarTask>,
    default: {},
  },
  rowHeight: {
    type: Number,
    default: 0,
  },
  taskHeight: {
    type: Number,
    default: 0,
  },
  arrowIndent: {
    type: Number,
    default: 0,
  },
  rtl: {
    type: Boolean,
    default: false,
  },
});
const path = ref("");
const trianglePoints = ref("");
const drownPathAndTriangleRTL = (
  taskFrom: BarTask,
  taskTo: BarTask,
  rowHeight: number,
  taskHeight: number,
  arrowIndent: number
) => {
  const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
  const taskToEndPosition = taskTo.y + taskHeight / 2;
  const taskFromEndPosition = taskFrom.x1 - arrowIndent * 2;
  const taskFromHorizontalOffsetValue =
    taskFromEndPosition > taskTo.x2 ? "" : `H ${taskTo.x2 + arrowIndent}`;
  const taskToHorizontalOffsetValue =
    taskFromEndPosition < taskTo.x2
      ? -arrowIndent
      : taskTo.x2 - taskFrom.x1 + arrowIndent;

  const pathTmp = `M ${taskFrom.x1} ${taskFrom.y + taskHeight / 2} 
  h ${-arrowIndent} 
  v ${(indexCompare * rowHeight) / 2} 
  ${taskFromHorizontalOffsetValue}
  V ${taskToEndPosition} 
  h ${taskToHorizontalOffsetValue}`;

  const trianglePointsTmp = `${taskTo.x2},${taskToEndPosition} 
  ${taskTo.x2 + 5},${taskToEndPosition + 5} 
  ${taskTo.x2 + 5},${taskToEndPosition - 5}`;
  path.value = pathTmp;
  trianglePoints.value = trianglePointsTmp;
};
const drownPathAndTriangle = (
  taskFrom: BarTask,
  taskTo: BarTask,
  rowHeight: number,
  taskHeight: number,
  arrowIndent: number
) => {
  const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
  const taskToEndPosition = taskTo.y + taskHeight / 2;
  const taskFromEndPosition = taskFrom.x2 + arrowIndent * 2;
  const taskFromHorizontalOffsetValue =
    taskFromEndPosition < taskTo.x1 ? "" : `H ${taskTo.x1 - arrowIndent}`;
  const taskToHorizontalOffsetValue =
    taskFromEndPosition > taskTo.x1
      ? arrowIndent
      : taskTo.x1 - taskFrom.x2 - arrowIndent;

  const pathTmp = `M ${taskFrom.x2} ${taskFrom.y + taskHeight / 2} 
  h ${arrowIndent} 
  v ${(indexCompare * rowHeight) / 2} 
  ${taskFromHorizontalOffsetValue}
  V ${taskToEndPosition} 
  h ${taskToHorizontalOffsetValue}`;

  const trianglePointsTmp = `${taskTo.x1},${taskToEndPosition} 
  ${taskTo.x1 - 5},${taskToEndPosition - 5} 
  ${taskTo.x1 - 5},${taskToEndPosition + 5}`;
  path.value = pathTmp;
  trianglePoints.value = trianglePointsTmp;
};
const updateTrianglePoints = () => {
  if (props.rtl) {
    drownPathAndTriangleRTL(
      props.taskFrom,
      props.taskTo,
      props.rowHeight,
      props.taskHeight,
      props.arrowIndent
    );
  } else {
    drownPathAndTriangle(
      props.taskFrom,
      props.taskTo,
      props.rowHeight,
      props.taskHeight,
      props.arrowIndent
    );
  }
};
watch(
  () => [props.taskFrom, props.taskTo],
  () => {
    updateTrianglePoints();
  }
);
onMounted(() => {
  updateTrianglePoints();
});
</script>